<template>
    <el-tabs  v-model="activeName" class="demo-tabs" type="border-card">
        <el-tab-pane name="/despro" >
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../icons/problem.svg" alt="">
                    <span>算法简介</span>
                </span>
            </template>
            <recur-hanoi-des-pro></recur-hanoi-des-pro>
        </el-tab-pane>
        <el-tab-pane name="/analalg">
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../icons/analyse.svg" alt="">
                    <span>算法分析</span>
                </span>
            </template>
            <recurHanoiAnalAlg></recurHanoiAnalAlg>
        </el-tab-pane>
        <el-tab-pane name="/flash">
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../icons/demo.svg" alt="">
                    <span>算法演示</span>
                </span>
            </template>
            <recurHanoiFlash></recurHanoiFlash>
        </el-tab-pane>
        <el-tab-pane name="/practice">
            <template #label>
                <span class="custom-tabs-label">
                    <img class="icon" src="../../../icons/practice.svg" alt="">
                    <span>算法练习</span>
                </span>
            </template>
            <recurHanoiPractice></recurHanoiPractice>
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    import RecurHanoiDesPro from "../recur-hanoi/components/recurHanoiDesPro.vue";
    import recurHanoiAnalAlg from "../recur-hanoi/components/recurHanoiAnalAlg.vue";
    import recurHanoiFlash from "../recur-hanoi/components/recurHanoiFlash.vue";
    import recurHanoiPractice from "../recur-hanoi/components/recurHanoiPractice.vue";
    // import {useRoute} from 'vue-router';
    // const route=useRoute();
    const activeName = ref('/despro')

</script>
<style>
.demo-tabs > .el-tabs__content {
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .custom-tabs-label {
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
        width: 22px;
        height: 22px;
        margin-right: 5px;
    }
}
</style>